<template>
    <div>
        <h1>User</h1>
        <p>id: {{ $route.params.id }}</p>
        <p>props:{{ id }}</p>
    </div>
    <RouterLink to="/user/1">User 1</RouterLink>
    <RouterLink to="/user/2">User 2</RouterLink>
</template>
<script setup lang="js">
import { watch } from 'vue';
import { useRoute, onBeforeRouteUpdate } from 'vue-router';

const route = useRoute();


defineProps({
    id: {
        type: String,
        required: true
    }
})


console.log('--------------------================');

watch(() => route.params.id, (newId, oldId) => {
    console.log('newId', newId);
    console.log('oldId', oldId)
})

onBeforeRouteUpdate((to, form) => {
    console.log('to', to);
    console.log('form', form)
})


</script>